<template>
  <view class="participation">
    <view v-if="loading" class="loading">加载中...</view>
    <view v-else-if="voteRecords.length === 0" class="no-data">暂无投票记录</view>
    <view v-else class="vote-list">
      <view 
        v-for="record in voteRecords" 
        :key="record.id" 
        class="vote-item"
      >
        <!-- 显示选手封面 -->
        <image :src="record.cover" alt="封面" class="vote-cover" />
        <view class="vote-info">
          <!-- 显示选手姓名 -->
          <text class="vote-title">标题：{{ record.tittle }}</text>
          <!-- 显示活动标题 -->
          <text class="vote-intro">投票内容：{{ record.intro }}</text>
          <text class="vote-num">投票数：{{ record.num }}</text>
          
          <!-- 跳转按钮 -->
          <button @click="goToActivity(record.actId)" class="vote-details-btn">查看活动详情</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { ref, onMounted } from "vue";
import { getMyVoteAPI } from "@/api/vote"; // 获取投票记录

export default {
  name: "Participation",
  setup() {
    const loading = ref(true); // 加载状态
    const voteRecords = ref([]); // 存储投票记录

    // 获取投票记录
    const fetchVoteRecords = async () => {
      try {
        const response = await getMyVoteAPI(); // 假设该函数是通过API获取投票数据
        if (response.code === "200" && response.data) {
          // 过滤掉无效的记录 (null 或 undefined)
          voteRecords.value = response.data.filter(record => record !== null && record !== undefined);
        } else {
          voteRecords.value = []; // 无数据
        }
      } catch (error) {
        console.error("获取投票记录失败:", error);
        voteRecords.value = [];
      } finally {
        loading.value = false; // 加载完成
      }
    };

    // 跳转到活动详情页
    const goToActivity = (actId) => {
      // 活动详情页面，url 包含 actId 作为参数
      uni.navigateTo({ url: `/pages/vote/index?id=${actId}` }); 
    };

    onMounted(() => {
      fetchVoteRecords(); // 页面加载时获取投票记录
    });

    return {
      loading,
      voteRecords,
      goToActivity
    };
  },
};
</script>

<style scoped>
.participation {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80%; /* 控制容器宽度，不靠在页面两侧 */
  max-width: 1200px; /* 最大宽度限制 */
  margin: 0 auto; /* 水平居中 */
}

.loading,
.no-data {
  text-align: center;
  font-size: 16px;
  color: #888;
}

.vote-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.vote-item {
  display: flex;
  flex-direction: row;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  width: 300px; /* 固定宽度 */
  height: 160px; /* 固定高度 */
}

.vote-cover {
  width: 120px; /* 固定图片宽度 */
  height: 120px; /* 固定图片高度 */
  object-fit: cover; /* 保持图片比例并填充容器 */
}

.vote-info {
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 分配空间 */
  flex: 1;
  overflow: hidden; /* 避免内容溢出 */
}

.vote-title,
.vote-intro,
.vote-num {
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
  text-overflow: ellipsis; /* 处理超长文本 */
  white-space: nowrap; /* 保证文本不换行 */
  overflow: hidden; /* 隐藏超出部分 */
}

.vote-title {
  font-weight: bold;
}

.vote-intro {
  font-weight: bold;
}

.vote-num {
  font-weight: normal;
}

.vote-details-btn {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 8px;
  width: 100%; /* 使按钮宽度适应容器 */
}

.vote-details-btn:hover {
  background-color: #0056b3;
}
</style>
